<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>22canvas绘制图片</title>
</head>
<style>
    canvas {
        border: 1px solid #ccc;
    }
</style>
<body>

<canvas width="600" height="400">

</canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*绘制图片的三种方式*/
    /*   1.加载图片到内存即可
        var img = document.createElement('img');
        img.src = 'image/img2.png';*/
    /*创建对象*/
    var image = new Image();
    /*必须等待图片加载完毕*/
    /*绑定加载时间*/
    image.onload = function () {
        /*即在这里一定可以使用*/
        /*实现图片绘制*/
        console.log(image);
        /* 3参数
         * img对象
         * 绘制在画布上的坐标x y*/
        // ctx.drawImage(image,100,100);
        /* 5参数 img对象
         * 绘制在画布上的坐标 x y
         * 图片的大小（不是裁剪 是缩放）*/
        // ctx.drawImage(image,50,50,400,400);
        /* 9参数 img对象
         * 图片上定位的坐标 x y
         * 在图片上截取多大的区域 w h
         * 绘制在画布上的坐标
         * 图片的大小（不是裁剪 是缩放）
         * */

        ctx.drawImage(image,580,80,800,800,100,0,300,300);
    };
    image.src = 'image/img1.png';

    /*2.*/
</script>
</body>
</html>
